<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>智教慧学全景云平台 - 登录</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <!-- 引入图标库增强按钮视觉识别性 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      color: #333;
    }

    .container {
      position: relative;
      width: 400px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .container:hover {
      transform: translateY(-5px);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
    }

    .header {
      background: linear-gradient(90deg, #4a00e0, #8e2de2);
      color: white;
      padding: 30px 20px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      position: relative; /* 为返回首页按钮提供定位父容器 */
    }

    /* 新增：返回首页按钮样式 */
    .back-home-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      backdrop-filter: blur(5px);
    }

    .back-home-btn:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .back-home-btn:active {
      transform: translateY(-50%) scale(0.95);
    }

    .header h1 {
      font-size: 1.8rem;
      font-weight: 500;
      letter-spacing: 1px;
    }

    .header p {
      font-size: 0.95rem;
      opacity: 0.9;
      margin-top: 8px;
    }

    .form-container {
      padding: 30px;
      position: relative;
      min-height: 400px;
    }

    .form {
      display: none;
      animation: fadeIn 0.6s ease forwards;
    }

    .form.active {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .form h2 {
      text-align: center;
      margin-bottom: 25px;
      color: #4a00e0;
      font-weight: 500;
    }

    .input-group {
      margin-bottom: 20px;
    }

    .input-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 0.95rem;
      color: #555;
    }

    .input-group input,
    .input-group select {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 1rem;
      transition: all 0.3s ease;
      background-color: #f9f9f9;
    }

    .input-group input:focus,
    .input-group select:focus {
      border-color: #667eea;
      outline: none;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
      background-color: #fff;
    }

    .btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(90deg, #667eea, #764ba2);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 1.1rem;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 500;
      margin-top: 10px;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

    .btn:active {
      transform: translateY(0);
    }

    .switch-text {
      text-align: center;
      margin-top: 25px;
      font-size: 0.95rem;
      color: #666;
    }

    .switch-link {
      color: #667eea;
      text-decoration: none;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.3s;
    }

    .switch-link:hover {
      color: #4a00e0;
      text-decoration: underline;
    }

    /* 动画装饰元素 */
    .decoration {
      position: absolute;
      pointer-events: none;
      z-index: -1;
    }

    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: rgba(102, 126, 234, 0.1);
      top: -50px;
      right: -50px;
    }

    .blob {
      width: 150px;
      height: 150px;
      background: rgba(118, 75, 162, 0.1);
      clip-path: circle(50% at 50% 50%);
      top: 300px;
      left: -70px;
      opacity: 0.7;
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% {
        transform: translate(0, 0) rotate(0deg);
      }
      50% {
        transform: translate(20px, -20px) rotate(10deg);
      }
    }

    /* 响应式优化：适配小屏幕 */
    @media (max-width: 480px) {
      .container {
        width: 90%;
        margin: 10px;
      }
      .header h1 {
        font-size: 1.5rem; /* 小屏幕缩小标题字体 */
      }
      .back-home-btn {
        width: 36px;
        height: 36px;
        font-size: 1rem; /* 小屏幕缩小按钮尺寸 */
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="decoration circle"></div>
    <div class="decoration blob"></div>

    <div class="header">
      <!-- 新增：返回首页按钮（带图标+渐变背景） -->
      <button class="back-home-btn" onclick="goToHomePage()" title="返回首页">
        <i class="fas fa-home"></i>
      </button>
      <h1>智教慧学全景云平台</h1>
      <p>学径导航，知心学伴</p>
    </div>

    <div class="form-container">
      <!-- 登录表单 -->
      <form id="login-form" class="form active">
        <h2>用户登录</h2>
        <div class="input-group">
          <label for="login-phone">手机号</label>
          <input type="text" id="login-phone" placeholder="请输入11位手机号" maxlength="11" required />
        </div>
        <div class="input-group">
          <label for="login-password">密码</label>
          <input type="password" id="login-password" placeholder="请输入密码" required />
        </div>
        <button type="button" class="btn" onclick="login()">登录</button>
        <div class="switch-text">
          还没有账号？<span class="switch-link" onclick="showForm('register')">立即注册</span>
        </div>
        <div class="switch-text" style="margin-top:10px;">
          忘记密码？<span class="switch-link" onclick="showForm('forgot')">找回密码</span>
        </div>
      </form>

      <!-- 注册表单 -->
      <form id="register-form" class="form">
        <h2>用户注册</h2>
        <div class="input-group">
          <label for="register-phone">手机号</label>
          <input type="text" id="register-phone" placeholder="请输入11位手机号" maxlength="11" required />
        </div>
        <div class="input-group">
          <label for="register-password">密码</label>
          <input type="password" id="register-password" placeholder="请输入密码（至少6位，含数字和字母）" required />
        </div>
        <div class="input-group">
          <label for="register-email">邮箱</label>
          <input type="email" id="register-email" placeholder="请输入邮箱地址" required />
        </div>
        <div class="input-group">
          <label for="user-type">用户类型</label>
          <select id="user-type" required>
            <option value="">请选择用户类型</option>
            <option value="teacher">教师</option>
            <option value="student">学生</option>
          </select>
        </div>
        <button type="button" class="btn" onclick="register()">注册</button>
        <div class="switch-text">
          已有账号？<span class="switch-link" onclick="showForm('login')">立即登录</span>
        </div>
      </form>

      <!-- 找回密码表单 -->
      <form id="forgot-form" class="form">
        <h2>找回密码</h2>
        <div class="input-group">
          <label for="forgot-phone">手机号</label>
          <input type="text" id="forgot-phone" placeholder="请输入注册手机号" maxlength="11" required />
        </div>
        <div class="input-group">
          <label for="forgot-email">邮箱</label>
          <input type="email" id="forgot-email" placeholder="请输入注册邮箱" required />
        </div>
        <button type="button" class="btn" onclick="forgotPassword()">发送重置密码邮件</button>
        <div class="switch-text">
          记起密码了？<span class="switch-link" onclick="showForm('login')">返回登录</span>
        </div>
      </form>
    </div>
  </div>

  <script>
    // 切换表单显示
    function showForm(formName) {
      document.querySelectorAll('.form').forEach(form => {
        form.classList.remove('active');
      });
      document.getElementById(formName + '-form').classList.add('active');
    }

    // 登录功能（模拟）
    function login() {
      const phone = document.getElementById('login-phone').value;
      const password = document.getElementById('login-password').value;

      if (!phone || !password) {
        alert('请填写手机号和密码');
        return;
      }

      if (phone.length !== 11 || !/^\d+$/.test(phone)) {
        alert('手机号格式不正确');
        return;
      }

      // 模拟成功登录
      alert(`登录成功！欢迎使用智教慧学平台，${phone}`);
      // 实际项目中可替换为：window.location.href = "首页地址";
    }

    // 注册功能（模拟）
    function register() {
      const phone = document.getElementById('register-phone').value;
      const password = document.getElementById('register-password').value;
      const email = document.getElementById('register-email').value;
      const userType = document.getElementById('user-type').value;

      if (!phone || !password || !email || !userType) {
        alert('请完整填写所有信息');
        return;
      }

      if (phone.length !== 11 || !/^\d+$/.test(phone)) {
        alert('手机号格式不正确');
        return;
      }

      if (password.length < 6 || !/(?=.*\d)(?=.*[a-zA-Z])/.test(password)) {
        alert('密码至少6位，且包含数字和字母');
        return;
      }

      if (!/^\S+@\S+\.\S+$/.test(email)) {
        alert('邮箱格式不正确');
        return;
      }

      alert(`注册成功！您的账号已创建，用户类型：${userType === 'teacher' ? '教师' : '学生'}`);
      showForm('login');
    }

    // 找回密码功能（模拟）
    function forgotPassword() {
      const phone = document.getElementById('forgot-phone').value;
      const email = document.getElementById('forgot-email').value;

      if (!phone || !email) {
        alert('请填写手机号和邮箱');
        return;
      }

      if (phone.length !== 11 || !/^\d+$/.test(phone)) {
        alert('手机号格式不正确');
        return;
      }

      if (!/^\S+@\S+\.\S+$/.test(email)) {
        alert('邮箱格式不正确');
        return;
      }

      alert(`密码重置链接已发送至 ${email}，请查收邮件完成操作。`);
      showForm('login');
    }

    // 新增：返回首页功能（可根据实际项目修改跳转地址）
    function goToHomePage() {
      // 模拟首页跳转（实际项目替换为真实首页URL）
      const confirmGoHome = confirm('确定要返回平台首页吗？');
      if (confirmGoHome) {
        window.location.href = "http://127.0.0.1:8848/TestDemo/js/shouye.html"; // 真实项目替换此地址
        alert('已跳转到平台首页');
      }
    }

    // 回车键支持
    document.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        const activeForm = document.querySelector('.form.active');
        if (activeForm.id === 'login-form') login();
        else if (activeForm.id === 'register-form') register();
        else if (activeForm.id === 'forgot-form') forgotPassword();
      }
    });
  </script>
</body>
</html>